<template>
    <div class="wrapper-home">
       <div class="left">
           <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
      <el-menu-item index="/user/home">
        <i class="el-icon-s-data"></i>
        <span slot="title" >首页</span>
      </el-menu-item>
      <el-submenu index="/product/list">
        <template slot="title">
          <i class="el-icon-s-unfold"></i>
          <span>商品</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/product/list">商品管理</el-menu-item>
          <el-menu-item index="/product">品类管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu>
        <template slot="title">
          <i class="el-icon-s-unfold"></i>
          <span>订单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/order">订单管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/user/list">用户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
       </div>
       <div class="right">
           <div class="headers">
               <el-dropdown class="out">
                    <span class="el-dropdown-link">
                        admin<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                          <router-link to="/" style="">退出登录</router-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
           </div>
           <router-view></router-view>
       </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        goHome(){
            this.$router.push('/user/home')
        }
    },
};
</script>

<style lang="scss" scoped>
.wrapper-home {
  width: 100%;
  height: 100vh;
  display: flex;
  .left {
    width: 240px;
    height: 100%;
    background: #32323a;
  }
  .right {
    flex: 1;
    height: 100%;
    .headers{
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #ddd;
        .out{
            height: 100%;
            line-height: 60px;
            float: right;
        }
    }
  }
}
</style>